<template>
  <div class="validation-test">
    <h2>前后端验证规则测试</h2>
    
    <!-- 登录表单测试 -->
    <el-card class="test-card">
      <template #header>
        <h3>登录表单验证测试</h3>
      </template>
      
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="loginRules"
        label-width="120px"
      >
        <el-form-item label="用户名/邮箱" prop="username">
          <el-input v-model="loginForm.username" placeholder="请输入用户名或邮箱" />
        </el-form-item>
        
        <el-form-item label="密码" prop="password">
          <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="testLogin">测试登录验证</el-button>
          <el-button @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <!-- 注册表单测试 -->
    <el-card class="test-card">
      <template #header>
        <h3>注册表单验证测试</h3>
      </template>
      
      <el-form
        ref="registerFormRef"
        :model="registerForm"
        :rules="registerRules"
        label-width="120px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="registerForm.username" placeholder="请输入用户名" />
        </el-form-item>
        
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="registerForm.email" placeholder="请输入邮箱" />
        </el-form-item>
        
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="registerForm.realName" placeholder="请输入真实姓名（可选）" />
        </el-form-item>
        
        <el-form-item label="密码" prop="password">
          <el-input v-model="registerForm.password" type="password" placeholder="请输入密码" />
        </el-form-item>
        
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="registerForm.confirmPassword" type="password" placeholder="请确认密码" />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="testRegister">测试注册验证</el-button>
          <el-button @click="resetRegisterForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <!-- 验证规则说明 -->
    <el-card class="test-card">
      <template #header>
        <h3>验证规则说明</h3>
      </template>
      
      <div class="rules-info">
        <h4>用户名规则：</h4>
        <ul>
          <li>长度：3-20个字符</li>
          <li>格式：只能包含字母、数字和下划线</li>
          <li>示例：user123, test_user</li>
        </ul>
        
        <h4>密码规则：</h4>
        <ul>
          <li>长度：6-20个字符</li>
          <li>格式：必须包含字母和数字</li>
          <li>示例：abc123, password1</li>
        </ul>
        
        <h4>邮箱规则：</h4>
        <ul>
          <li>格式：标准邮箱格式</li>
          <li>示例：user@example.com</li>
        </ul>
        
        <h4>真实姓名规则：</h4>
        <ul>
          <li>长度：最多50个字符</li>
          <li>可选字段</li>
        </ul>
      </div>
    </el-card>
    
    <!-- 测试用例 -->
    <el-card class="test-card">
      <template #header>
        <h3>快速测试用例</h3>
      </template>
      
      <div class="test-cases">
        <h4>有效数据：</h4>
        <el-button @click="fillValidData">填充有效数据</el-button>
        
        <h4>无效数据测试：</h4>
        <el-button @click="fillInvalidUsername">无效用户名</el-button>
        <el-button @click="fillInvalidPassword">无效密码</el-button>
        <el-button @click="fillInvalidEmail">无效邮箱</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, type FormInstance } from 'element-plus'
import { getElementPlusRules, validators } from '@/utils/validation'

// 表单引用
const loginFormRef = ref<FormInstance>()
const registerFormRef = ref<FormInstance>()

// 表单数据
const loginForm = reactive({
  username: '',
  password: ''
})

const registerForm = reactive({
  username: '',
  email: '',
  realName: '',
  password: '',
  confirmPassword: ''
})

// 验证规则
const validationRules = getElementPlusRules()
const loginRules = validationRules.login
const registerRules = {
  ...validationRules.register,
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    { 
      validator: (_rule: any, value: string, callback: Function) => {
        const error = validators.confirmPassword(value, registerForm.password)
        if (error) {
          callback(new Error(error))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 测试方法
const testLogin = async () => {
  if (!loginFormRef.value) return
  
  try {
    await loginFormRef.value.validate()
    ElMessage.success('登录表单验证通过！')
  } catch (error) {
    ElMessage.error('登录表单验证失败，请检查输入')
  }
}

const testRegister = async () => {
  if (!registerFormRef.value) return
  
  try {
    await registerFormRef.value.validate()
    ElMessage.success('注册表单验证通过！')
  } catch (error) {
    ElMessage.error('注册表单验证失败，请检查输入')
  }
}

const resetLoginForm = () => {
  if (loginFormRef.value) {
    loginFormRef.value.resetFields()
  }
}

const resetRegisterForm = () => {
  if (registerFormRef.value) {
    registerFormRef.value.resetFields()
  }
}

// 测试用例方法
const fillValidData = () => {
  loginForm.username = 'testuser'
  loginForm.password = 'test123'
  
  registerForm.username = 'testuser'
  registerForm.email = 'test@example.com'
  registerForm.realName = '测试用户'
  registerForm.password = 'test123'
  registerForm.confirmPassword = 'test123'
}

const fillInvalidUsername = () => {
  registerForm.username = 'ab' // 太短
  registerForm.email = 'test@example.com'
  registerForm.password = 'test123'
  registerForm.confirmPassword = 'test123'
}

const fillInvalidPassword = () => {
  registerForm.username = 'testuser'
  registerForm.email = 'test@example.com'
  registerForm.password = '123456' // 只有数字，没有字母
  registerForm.confirmPassword = '123456'
}

const fillInvalidEmail = () => {
  registerForm.username = 'testuser'
  registerForm.email = 'invalid-email' // 无效邮箱格式
  registerForm.password = 'test123'
  registerForm.confirmPassword = 'test123'
}
</script>

<style lang="scss" scoped>
.validation-test {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-card {
  margin-bottom: 20px;
}

.rules-info {
  h4 {
    color: var(--el-color-primary);
    margin-top: 16px;
    margin-bottom: 8px;
  }
  
  ul {
    margin: 0;
    padding-left: 20px;
    
    li {
      margin-bottom: 4px;
      color: var(--el-text-color-regular);
    }
  }
}

.test-cases {
  h4 {
    color: var(--el-color-primary);
    margin-top: 16px;
    margin-bottom: 8px;
  }
  
  .el-button {
    margin-right: 8px;
    margin-bottom: 8px;
  }
}
</style>
